<template>
  <div class="cascade-tree-wrapper">
    <el-button class="cascade-btn" size="small" type="primary" @click.stop="changeCascade($event)">
      {{cascadeData.label}}
      <i :class="{icon: true}"></i>
    </el-button>

    <div class="cascade-tree-box">
      <!--第一个框 级联选项-->
      <div class="cascade-select-box cascade-select">
        <div class="cascade-select-list-box">
          <div class="no-data" v-if="cascadeData.option && cascadeData.option.length === 0">暂无数据</div>
          <div class="cascade-select-list" v-else :title="item.label" :class="{'is-active':item.id === activeId}" v-for="item in cascadeData.option"
               :key="item.id" @click.stop="getSubData(item)">
            <span>{{item.label}}</span>
            <i class="iconfont cascade-icon-arrow">&#xe637;</i>
          </div>
        </div>
        <div class="btn-box">
          <el-button plain size="mini" @click.stop="confirm('cascade')">确认</el-button>
          <el-button plain size="mini" @click.stop="cancel('cascade')">取消</el-button>
        </div>
      </div>
      <!--第二个框 级联树 -->
      <div class="cascade-select-box cascade-tree" v-if="isTree">
        <el-tree ref="cascadeTree" :props="treeDefaultProps" :node-key="'id'" :data="treeData" show-checkbox @check-change="checkChange">
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span :title="node.label">{{ node.label }}</span>
          </span>
        </el-tree>
        <div class="btn-box">
          <el-button plain size="mini" @click.stop="confirm('tree')">确认</el-button>
          <el-button plain size="mini" @click.stop="cancel('tree')">取消</el-button>
          <el-button plain size="mini" @click.stop="treeAll(false)">清空</el-button>
          <el-button plain size="mini" @click.stop="treeAll(true)">全选</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'CascadeTree',
    props:{
      //下拉数据。从父组件传入
      cascadeTreeData:{
        type: Object,
        default: function () {
          return {label:'',option:[]}
        }
      }
    },
    watch:{
      cascadeTreeData:{
        handler: function (val) {
          val && (this.cascadeData = this.cloneObj(val));
        },
        immediate: true,
        deep: true
      },
    },
    data() {
      return {
        cascadeData:{},
        isTree:false,
        treeData:[],
        activeId:"",
        checkedNodes:[],
        treeDefaultProps: {
          children: 'children',
          label: 'label'
        },
        isAllCheck:false,
      }
    },
    mounted() {
     this.init();
    },
    methods: {
      init(){
         let me = this;
      document.addEventListener('click',function () {
        let el = document.getElementsByClassName("is-cascade-select");
        let eli = document.getElementsByClassName("iconTrans");
        if(el && el.length > 0){
          me.isTree = false;
          me.checkedNodes = [];
          for (let i = 0;i < el.length;i++){
            el[i].classList.remove("is-cascade-select");
          }
        }
        if(eli && eli.length > 0){
          for (let i = 0;i < eli.length;i++){
            eli[i].classList.remove("iconTrans");
          }
        }
      })
      },
      changeCascade(e){
        let activeEl = null,flag = false,iEl = null;
        let targetName = e.target.tagName.toLowerCase();
        if(targetName === 'button'){
          activeEl = e.target.nextElementSibling;
          iEl = e.target.getElementsByTagName("i")[0];
        }else if(targetName === 'span'){
          activeEl = e.target.parentElement.nextElementSibling;
          iEl = e.target.getElementsByTagName("i")[0]
        }else{
          activeEl = e.target.parentElement.parentElement.nextElementSibling;
          iEl = e.target;
        }
        flag = activeEl.classList.contains('is-cascade-select');
        this.clearClass();
        let me = this;
        this.$nextTick(() => {
          if(!flag){
            activeEl.classList.add("is-cascade-select");
            iEl.classList.add("iconTrans");
          }else{
            activeEl.classList.remove("is-cascade-select");
            iEl.classList.remove("iconTrans");
          }
          me.isTree = false;
          me.activeId = "";
        })
      },
      //点击第一级获取树数据
      getSubData(item){
        this.treeData = item.children;
        this.activeId = item.id;
        !this.isTree && (this.isTree = true);
        this.$nextTick(() => {
          item.checkedNodes && this.$refs.cascadeTree.setCheckedNodes(item.checkedNodes);
        })
      },
      //选中树节点
      checkChange(){
        this.checkedNodes = this.$refs.cascadeTree.getCheckedNodes();
      },
      //树确认
      confirm(str){
        if(str === 'tree'){
          this.cascadeData.option.forEach(d => {
            d.id === this.activeId && (d["checkedNodes"] = this.checkedNodes,d["isAllCheck"] = this.isAllCheck);
          })
        }else{
          this.clearClass();
          this.$emit('cascade-tree-change',this.cascadeData);
        }
        this.isTree = false;
      },
      //全选和清空
      treeAll(isCheck){
        this.isAllCheck = isCheck;
        let treeData = isCheck ? this.treeData : [];
        this.$refs.cascadeTree.setCheckedNodes(treeData);
      },
      //取消
      cancel(str){
        this.isTree = false;
        this.checkedNodes = [];
        str === 'cascade' && this.clearClass();
      },
      clearClass(){
        let el = document.getElementsByClassName("is-cascade-select");
        if(el && el.length > 0){
          for (let i = 0;i < el.length;i++){
            el[i].classList.remove("is-cascade-select");
          }
        }
        let eli = document.getElementsByClassName("iconTrans");
        if( eli && eli.length > 0){
          for (let i = 0;i < eli.length;i++){
            eli[i].classList.remove("iconTrans");
          }
        }
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  @import "../../../assets/styles/base_style";
  .cascade-tree-wrapper{
    display: inline-block;
    $cascadeSelectWid:210px;
    position: relative;
    .cascade-btn{
      position: relative;
      padding-right: 25px;
    }
    .icon {
      display: inline-block;
      position: absolute;
      top: calc((100% - 16px) / 2);
      right: 3px;
      width: 16px;
      height: 16px;
      background: url("../../../assets/images/cascadetree/arrow.png") no-repeat;
      -webkit-transition: transform .25s linear;
      -moz-transition: transform .25s linear;
      -o-transition: transform .25s linear;
      transition: transform .25s linear;
    }
    .iconTrans {
      transform: rotate(180deg);
      -webkit-transition: transform .25s linear;
      -moz-transition: transform .25s linear;
      -o-transition: transform .25s linear;
      transition: transform .25s linear;
    }
    .cascade-tree-box{
      position: absolute;
      z-index: 1000;
      display: none;
      /*width:500px;
      height: 500px;*/
      .cascade-select-box{
        background: #fff;
        border: 1px solid #E4E7ED;
        border-radius: 5px;
        width:$cascadeSelectWid;
        color: #606266;
        .btn-box{
          padding:5px 10px;
          border-top: 1px solid #E4E7ED;
          .el-button{
            color: #fff;
            font-size: 14px;
            padding: 5px 10px;
          }
          .el-button + .el-button{
            margin-left: 5px;
          }
        }
        .no-data{
          text-align: center;
        }
      }
      .cascade-select{
        font-size: 14px;
        .cascade-select-list-box{
          max-height: 200px;
          overflow-y: auto;
          @include scrollbarStyle(3px,3px,transparent,#5FA0F0);
          .cascade-select-list{
            padding: 4px 20px 4px 10px;
            cursor: pointer;
            position: relative;
            @include ellipsisOneRow;
            .cascade-icon-arrow{
              font-size: 13px;
              position: absolute;
              right: 5px;
            }
          }
          .is-active{
            background: #F5F7FA;
          }
        }
      }
      .cascade-tree{
        width:260px;
        position: absolute;
        left: $cascadeSelectWid;
        top:0;
        padding-top: 5px;
        .custom-tree-node{
          font-size: 14px;
          @include ellipsisOneRow;
        }
      }
    }
    .is-cascade-select{
      display: block;
    }
  }
</style>
<style rel="stylesheet/scss" lang="scss">
  @import "../../../assets/styles/base_style";
  .cascade-tree-wrapper{
    .cascade-tree{
      .el-tree{
        color: #606266;
        background: transparent;
        height: 200px;
        overflow-y: auto;
        @include scrollbarStyle(3px,3px,transparent,#5FA0F0)
      }
      .el-tree-node__content{
        background: transparent;
        &:hover{
          background: #F5F7FA;
        }
      }
    }
  }
</style>
